<template>
	<view>
		<u-popup v-model="show" mode="center" border-radius="16" width="690rpx" z-index='10'>
			<view class="pay_box">
				<view class="title">店铺支付信息</view>
				<view class="text">
					<view class="left">开户银行</view>
					<view class="right">
						<text class="txt">{{info.bank}}</text>
						<text class="btn" @click="copyBtn(info.bank)">复制</text>
					</view>
				</view>
				<view class="text">
					<view class="left">账户名称</view>
					<view class="right">
						<text class="txt">{{info.name}}</text>
						<text class="btn" @click="copyBtn(info.name)">复制</text>
					</view>
				</view>
				<view class="text">
					<view class="left">银行账户</view>
					<view class="right">
						<text class="txt">{{info.number}}</text>
						<text class="btn" @click="copyBtn(info.number)">复制</text>
					</view>
				</view>
				<view class="text_img" v-if="info.zfb_img" @click="imageBtn(0)">
					<view class="txt">支付宝收款码</view>
					<image :src="info.zfb_img" mode="aspectFill"></image>
				</view>
				<view class="text_img" v-if="info.wx_image" @click="imageBtn(1)">
					<view class="txt">微信收款码</view>
					<image :src="info.wx_image" mode="aspectFill"></image>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name:"pay_info",
		props:{
			info:{
				type:Object,
				default:{},
			}
		},
		data() {
			return {
				show:false
			};
		},
		methods:{
			openBtn(){
				this.show=true
			},
			// 复制
			copyBtn(txt){
				uni.setClipboardData({
					data: txt,
					success: function () {
						console.log('success');
					}
				});
			},
			imageBtn(type){
				var arr = []
				if(type==0){
					arr.push(this.info.zfb_img)
					uni.previewImage({
						current:0,
						urls: arr,
					})
				}else{
					arr.push(this.info.wx_image)
					uni.previewImage({
						current:0,
						urls: arr,
					})
				}
			},
		}
	}
</script>

<style lang="less">
	.pay_box{
		width: 100%;
		height: 100%;
		padding: 40rpx 0;
		background: red;
		background: linear-gradient(to bottom, rgba(38, 194, 129, 0.20), rgba(38, 194, 129, 0), rgba(38, 194, 129, 0));
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		.title{
			width: 100%;
			font-size: 36rpx;
			text-align: center;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #222222;
		}
		.text{
			width: 100%;
			padding: 10rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left{
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
			.right{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.txt{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
				}
				.btn{
					margin-left: 20rpx;
					width: 80rpx;
					height: 45rpx;
					line-height: 41rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #26C281;
					border-radius: 25rpx;
					border: 1rpx solid #26C281;
				}
			}
		}
		.text_img{
			width: 100%;
			padding: 10rpx 30rpx;
			.txt{
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
			image{
				display: block;
				width: 60%;
				height: 150px;
				margin: 15rpx auto 0;
			}
		}
	}
</style>